<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tabel表格固定表头和首列(使用grid布局实现)</title>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
    }

    .flex {
      display: flex;
    }

    .flex-center {
      justify-content: center;
      align-items: center;
    }

    .justify-center {
      justify-content: center;
    }

    .align-center {
      align-items: center;
    }

    .table_box {
      position: relative;
      z-index: 999;
      width: 500px;
      height: 200px;
      margin: 20px auto;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      overflow: auto;
    }

    .table_header {
      position: sticky;
      top: 0;
      z-index: 999;
      color: #333;
      background: #f4f6ff;
      /* display: grid; 网格布局 */
      /* grid-auto-flow 属性控制自动放置的项目如何插入网格中 */
      /* column	通过填充每一列来放置项目 */
      display: grid;
      grid-auto-flow: column;
    }

    .table_header_th {
      position: relative;
      z-index: 888;
      width: 110px;
      height: 35px;
      background: #f4f6ff;
      border: 1px solid #e4e4e4;
      border-left: 0;
      border-top: 0;
      box-sizing: border-box;
    }

    .table_header_th:nth-child(1) {
      width: 120px;
      position: sticky;
      left: 0;
      z-index: 999;
    }

    .table_header_th:nth-child(2) {
      width: 120px;
      position: sticky;
      left: 120px;
      z-index: 999;
    }


    .table_body {
      background-color: #fff;
    }

    .table_tr {
      display: grid;
      grid-auto-flow: column;
      position: relative;
    }

    .table_td {
      width: 110px;
      height: 35px;
      /* background: #f4f6ff; */
      background: #fff;
      border: 1px solid #e4e4e4;
      border-left: 0;
      border-top: 0;
      box-sizing: border-box;
    }

    .table_td:nth-child(1) {
      width: 120px;
      position: sticky;
      left: 0;
    }

    .table_td:nth-child(2) {
      width: 120px;
      position: sticky;
      left: 120px;
    }


    /* 美化滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      width: 6px;
      background: rgba(#101F1C, 0.1);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, .5);
      /* background-clip: padding-box; */
      /* min-height: 28px; */
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
      transition: background-color .3s;
      cursor: pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(144, 147, 153, .3);
    }
  </style>
</head>

<body>
  <div class="table_box">
    <div class="table_header flex align-center ">
      <div class="table_header_th flex flex-center">序号</div>
      <div class="table_header_th flex flex-center">姓名</div>
      <div class="table_header_th flex flex-center">姓名</div>
      <div class="table_header_th flex flex-center">姓名</div>
      <div class="table_header_th flex flex-center">姓名</div>
    </div>
    <div class="table_body">
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>

    </div>
  </div>
</body>

</html>